<template>	
		<el-row class="content">
			<el-col :xs="{span:20,offset:2}" :sm="{span:8,offset:8}">
				<span class="title">欢迎{{name}},您的待办事项是</span>
				<el-input placeholder="请输入待办事项" v-model="todos" @keyup.enter.native="addTodos"></el-input>
				<el-tabs v-model="activeName">
				    <el-tab-pane label="待办事项" name="first">
				    	<ul v-if="!done">
				    		<li v-for="(li,index) in list" v-if="li.status==0">
				    			<span>{{index+1}}. {{li.content}}</span>
				    			<span class="pull-right">
				    			<el-button type="primary" size="small" @click="update(index)">完成</el-button>
				    			<el-button type="danger" size="small" @click="delet(index)">删除</el-button>
				    			</span>
				    		</li>
				    	</ul>
				    	<p v-else>暂无待办事项</p>
				    </el-tab-pane>
				    <el-tab-pane label="已完成事项" name="second">
				    	<ul v-if="count>0">
				    		<li v-for="(li,index) in list" v-if="li.status==1">
				    			<span class="finished">{{index+1}}. {{li.content}}</span>
				    			<span class="pull-right">
				    				<el-button type="primary" size="small" @click="update(index)">还原</el-button>
				    			</span>
				    		</li>
				    	</ul>
				    	<p v-else>暂无已完成事项</p>
				    </el-tab-pane>
	  			</el-tabs>
			</el-col>
			<router-link to="/test">去test</router-link>	
		</el-row>	
</template>
<script>
	import jwt from 'jsonwebtoken'
	export default{
		name:'Todolist',
		data(){
			return{
				name:'whl',
				list:[],//status:0待办1完成
				activeName: 'first',
				todos:'',
				count:0,
				id:'',//用户id	
				name:''//用户名

			}
		},
		computed:{
			done(){
				let count=0;
				let len=this.list.length;
				for(let i in this.list){
					this.list[i].status==1?count+=1:''
				}
				this.count=count;
				if(count==len||len==0){
					return true
				}else{
					return false
				}
			}
		},
		methods:{
			addTodos(){
				if(this.todos=="")
					return;
				let obj={
					con:this.todos,
					status:0,
					id:this.id
				}
				let self=this;
				this.$http.post('/api/todolist',obj).then((res)=>{
					if(res.status==200){
						self.$message({
							type:'success',
							message:'创建成功',
							duration:1500
						})
						self.getTodolist()
					}else{
						self.$message.error('创建失败')
					}
				})
				this.todos=""
				
			},
			delet(i){
				let self=this;
				this.$http.delete('/api/todolist/' + this.id+'/'+this.list[i].id).then((res)=>{
    				if(res.status==200){
    					self.$message({
    						type:'success',
    						message:'删除成功',
    						duration:1500
    					})
    					self.getTodolist();
    				}else{
    					self.$message.error('删除失败！')
    				}
    			}).catch((err)=>{
    				self.$message.error('任务删除失败！')
          			console.log(err)
    			})
				
			},
			update(i){
				let self=this;
				this.$http.put('/api/todolist',
					{
						id:self.list[i].id,
						userId:self.id,
						status:self.list[i].status
					}
					).then((res)=>{if(res.status==200){
					self.$message({
						type:'success',
						message:'状态更新成功！',
						duration:1500
					})
					self.getTodolist();
				}else{
						self.$message.error('任务状态更新失败！')
					}

				}).catch((err)=>{
					self.$message.error('任务状态更新失败！')
					console.log(err)
				})
			},
		
			getUserInfo(){
				const token=sessionStorage.getItem('demo-token');
				if(token!=null&&token!='null'){
					let decode=jwt.decode(token);
					return decode
				}else{
					null
				}
			},
			getTodolist(){
				const token=sessionStorage.getItem('demo-token');
				this.$http.get('/api/todolist/' + this.id,{headers:{'Authorization':'Bearer ' + token}}).then((res)=>{
					if(res.status==200){
						this.list=res.data
					}else{
						this.$message.error('获取列表失败')
						console.log(err)
					}
				})
			}

		},
		created(){
			const userInfo=this.getUserInfo();
			if(userInfo!=null){
				this.id=userInfo.id,
				this.name=userInfo.name
			}else{
				this.id='';
				this.name=''
			}
			this.getTodolist();
		}
	}
</script>
<style scoped>
	.title{
		line-height: 30px;
	}
	ul{
		padding-left: 0;
	} 
	ul li{
		text-align: left;
		list-style: none;
		line-height: 45px;
	}
	.pull-right{
		float: right;
	}
	.finished{
		text-decoration:line-through;
        color:#ddd;
	}
</style>